{extend name="template"}

{block name="body"}
<style>
    body{width:100%;height:100%;background: url(__ROOT__/static/index/img/reg_bg_x.jpg) repeat-x 0 top #fff;}
</style>
<div class="gas-register gas-index layui-fluid" style="margin:0 auto;width:1200px;">

    <div style="margin:0 auto;width: inherit;">
        <div class="header padding-bottom-20" style="margin-top:30px;position:relative;">
            <a href="/"><img style="height:60px;" src="__ROOT__/static/index/img/logo1.png"></a>
            <a href="/" style="position:absolute;right:0;bottom:30px;font-size:14px;color:#fff;vertical-align: bottom;">返回首页</a>
        </div>
        <style>
            .login-table{margin:40px auto 0;}
            .login-table tr{height:42px;}
            .login-table tr th{font-size:13px;color:#666;text-align: right;padding-right:10px;}
            .login-table tr td{text-align:left;}
            .login-table input.normal{
                width: 160px!important;
                height: 14px!important;
                padding: 6px 10px 7px 4px!important;
                border:1px solid #ddd;
            }
            .login-table input[type=checkbox]{
                vertical-align: -2px;
                margin-right:5px;
            }

            .login-table button {
                margin-right: 12px !important;
                padding: 7px 18px !important;
                text-decoration: none !important;
                font-size: 14px !important;
                background-color:#ff931d;
                border:0;
                color:white;
            }
            .layui-table td{padding-left:5px;padding-right:3px;}
            .layui-input{height:32px !important;line-height:32px !important;width:200px !important;}
            .layui-table[lay-skin=line] td, .layui-table[lay-skin=line] th {
                border-width: 1px;}
            .layui-tab-title li a{color:#666 !important;}
            .layui-laypage{margin:5px 0 0 0;}

        </style>
        <div class="layui-tab" style="padding:20px 0;width:100%;background-color: #fff;">

            <ul class="layui-tab-title">
                <li class="" style="min-width: 20px;"></li>
                <li><a href="/edu/enroll.html">培训报名</a></li>
                <li><a href="/edu/classlist.html">我的培训</a></li>
                <li><a href="/edu/examenroll.html">考核报名</a></li>
                <li class="layui-this"><a href="/edu/examlist.html">我的考核</a></li>
                <li><a href="/edu/cert.html">我的证书</a></li>
            </ul>
            <div class="layui-tab-content" style="min-height:300px;padding-top:0;">
                <div class="layui-tab-item layui-show">
                    <table class="layui-table" lay-skin="line">
                        <thead>
                        <tr>
                            <td style="width:100px;white-space:normal">考核名称</td><td>头像</td><td>姓名及报名号</td>
                            <td style="width:140px;white-space:normal">岗位及工种</td>
                            <td>考场与座位</td><td>考核结果</td>
                            <td>考核时间</td><td>报名时间</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody name="list">

                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="10" style="padding:0 0 0 10px;">
                                <div id="pagingBox"></div>
                            </td>
                        </tr>
                        </tfoot>
                        <tfoot name="tpl" style="display: none;">
                        <tr>
                            <td>__EXAM_NAME__</td><td><img src="__AVATAR__" /></td><td>__NAME__<br /><strong>__NO__</strong></td>
                            <td>__WORK_NAME__</td><td>__ROOM_NO__</td><td>__IS_PASS__</td><td>__EXAM_TIME__</td><td>__OCCUR_TIME__</td>
                            <td>
                                <p><a href="javascript:edit(__ID__);">修改</a></p>
                                <p><a href="javascript:open(__ID__);">查看</a></p>
                                <p><a href="javascript:del(__ID__);">删除</a></p>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

{/block}

{block name='style'}
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<script>if (location.href.indexOf('#') > -1) location.replace(location.href.split('#')[0])</script>
<link rel="stylesheet" href="__ROOT__/static/index/index.css">
{/block}

{block name='script'}
<script src="__ROOT__/static/index/index.js"></script>
<script>
    let classesJson = JSON.parse('{$classesJson|raw}');

    function del(id) {
        if(confirm("确定要删除吗?")){
            $.post("/edu/examdel.html", {id:id}, function(res) {
                if(res.code==0){
                    layer.msg(res.info);
                }else{
                    layer.msg(res.info);
                    setTimeout(function () {
                        location.reload();
                    }, 2000);
                }

            },"json");
        }
    }

    function edit(id) {
        layer.open({
            title:"修改报名资料",
            type: 2, area: [ '780px', '480px' ],
            content: "/edu/examedit.html?id="+id //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            //content: "<h1>hello</h1>" //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    }

    function open(id) {
        layer.open({
            title:"查看报名资料",
            type: 2, area: [ '780px', '500px' ],
            content: "/edu/examinfo.html?id="+id //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            //content: "<h1>hello</h1>" //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    }

    function getClassPositions(class_id){
        for(let i=0; i<classesJson.length; i++) {
            if(classesJson[i].id == class_id)
                return classesJson[i]['sub'];
        }
    }

    layui.use(['layer', 'jquery', 'form'], function () {
        layui.form.on('select(demo)', function(data){
            let positions = getClassPositions(data.value);
            let html = '<option>--请选择工种--</option>';
            for(let i=0; i<positions.length; i++){
                html += '<optgroup label="'+positions[i].name+'">'+positions[i].name+'</optgroup>';

                for(let j=0; j<positions[i]['sub'].length; j++) {
                    html += '<option value="' + positions[i]['sub'][j]['id'] + '">' + positions[i]['sub'][j]['name'] + '</option>'
                }
            }
            $("select[name=work_position]").html(html);
            layui.form.render();
        });
        layui.form.on('radio(GenderRadio)', function(data){
            $("input[name=gender]").val(data.value);
        });
    });

    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            dopost()
            return false;
            /*layer.msg(JSON.stringify(data.field));
            return false;*/
        });
    });


    function doupload(){
        let data = $("form[name=upload]").serialize();
        $.post("/edu/enrollupload.html", data, function(res) {
            if(res.code==0){
                layer.msg(res.info);
            }else{
                layer.msg(res.info);
                setTimeout(function () {
                    location.reload();
                }, 2000);
            }

        },"json");
    }

    function dopost(){
        let data = $("form").serialize();
        $.post("/edu/enrollresult.html", data, function(res) {
            if(res.code==0){
                layer.msg(res.info);
            }else{
                layer.msg(res.info);
                setTimeout(function () {
                    location.reload();
                }, 2000);
            }

        },"json");
    }


    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/admin/api.upload/file.html' //改成您自己的上传接口
            ,size: 1024
            , done(res){
                $("input[name=avatar]").val(res.url);
                $('#demo1').attr('src', res.url); //图片链接（base64）
                layer.msg("上传成功");
            },error: function () {
                layer.msg("上传失败，请稍候再试");
            }
        });

        var uploadInst2 = upload.render({
            elem: '#test2'
            , url: '/admin/api.upload/file.html' //改成您自己的上传接口
            ,size: 1024
            ,accept: 'file' //普通文件
            , done(res){
                $("input[name=upload-enroll]").val(res.url);
                doupload();
                //layer.msg("上传成功");
            },error: function () {
                layer.msg("上传失败，请稍候再试");
            }
        });

    });



</script>

<script>
    doSearch(1, paging=true);

    function doSearch(page=1) {
        var name = $("input[name=search-qiye-name]").val();
        $.post("/index/edu/ajaxSearchExam",{name:name,page:page},function(res) {
            console.log(res.data)
            $("tbody[name=list]").html(render(res.data.list));
            if(paging==true)
                doPaging(page, res.data.limit, res.data.total);
        },"json");

        function doPaging(currPage, itemsPerPage, itemTotal) {
            layui.use('laypage', function(){
                var laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'pagingBox'
                    ,count: itemTotal //数据总数，从服务端得到
                    ,limit:itemsPerPage
                    ,curr: currPage
                    ,jump: function(obj, first){
                        if(page!=obj.curr){
                            doSearch(obj.curr, false);
                        }
                    }
                });
            });
        }

        function render(data) {
            var list = "";
            for(var i=0; i<data.length; i++){
                var html = $("tfoot[name=tpl]").html();
                html = html.replace("__ID__", data[i].id);
                html = html.replace("__NAME__", data[i].name);
                let idno = data[i].idno.substr(0,9) + "<br />" + data[i].idno.substr(9,9);
                html = html.replace("__IDNO__", idno);
                html = html.replace("__COMPANY__", data[i].company);

                let room_no = "待分配";
                if(data[i].room_no){
                    room_no = data[i].room_addr + "<br />" + "考场号："+data[i].room_no + "<br />" + "座位号："+data[i].seat_no;
                }

                html = html.replace("__ROOM_NO__", room_no);
                html = html.replace("__PHONE__", data[i].phone);
                html = html.replace("__AVATAR__", data[i].avatar);

                let exam_time = data[i].exam_time?data[i].exam_time:"";
                html = html.replace("__EXAM_TIME__", exam_time);
                html = html.replace("__NO__", data[i].no);
                html = html.replace("__ID__", data[i].id);
                html = html.replace("__ID__", data[i].id);
                html = html.replace("__ID__", data[i].id);
                html = html.replace("__ID__", data[i].id);
                html = html.replace("__ID__", data[i].id);

                let is_pass = "待考核";
                if(data[i].is_pass==1) is_pass = "通过";
                if(data[i].is_pass==2) is_pass = "未通过";
                html = html.replace("__IS_PASS__", is_pass);
                html = html.replace("__EXAM_NAME__", data[i].exam_name);
                html = html.replace("__OCCUR_TIME__", data[i].occur_time);
                html = html.replace("__WORK_NAME__", data[i].work_name+"<br /><strong>"+data[i].position_name+"</strong>");
                list += html;
            }
            return list;
        }


    }
</script>
{/block}
